<template>
	<div class="content">
		<mt-header title="精品课" fixed style="background-color: #FA8C13;">
			<mt-button @click="showPicker=!showPicker" slot="right">{{ gradeName }} - {{ subjectName }}</mt-button>
		</mt-header>
		<div class="code">
			<div class="outBox">				
				<div v-for="(x, index) in codeList" :class="{active:index==0}" @click="chooseCode(x,$event)">
					ㅡ {{ x.name }}
				</div>
			</div>
		</div>
    <div class="page-picker-wrapper" v-show="showPicker">
      <mt-picker :slots="subjectSlots" ref="picker" @change="onSubjectChange" :visible-item-count="5" value-key="name" :showToolbar=true>
      		<span class="mint-datetime-action mint-datetime-cancel" @click="cancelSubject">取消</span>
      		<span class="mint-datetime-action mint-datetime-confirm" @click="chooseSubject">确定</span>
      </mt-picker>
    </div>
		<div class="page-loadmore-wrapper videoBox" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
				<mt-loadmore :bottom-method="loadBottom" :bottomLoadingText='bottomLoadingText'  @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
					<ul class="clearfix">
						<li v-for="(item,index) in videoList">
							<div @click="playVideo(item)">
							<img :src="item.imageurl" alt="" />
						</div>
						<p :title="item.small">{{ item.small || item.kcname }}</p>
						</li>
					</ul>
				</mt-loadmore>
				</div>
		<div v-show="noData" class="noData">
			此知识点正在完善中，请期待...
		</div>		
		<FooterMsg></FooterMsg>
	</div>
</template>

<script>
import FooterMsg from '../../components/FooterMsg'
import api from '../../api'
import { mapState, mapMutations } from 'vuex'
import $ from 'jquery'
import { Indicator, Toast, Picker } from 'mint-ui';
export default {
	components: {
		FooterMsg
	},
	data() {
		return {
			gradeList: [],
			subjectList: [],
			codeList: [],
			videoList: [],
			gradeName: '选择学段',
			subjectName: '选择科目',
			codeName: '请选择知识点',
			currentPage: 1,
			count: 0,
			allLoaded: false,
			bottomStatus: '',
			wrapperHeight: 0,
			bottomLoadingText: '加载中',
			id: 0,
			type: 0,
			showPicker:false,
			cacherCodeList:[],
			noData:false,
			subjectSlots: [{
				flex: 1,
				values: ['小学','初中','高中'],
				className: 'slot1',
				textAlign: 'center',
				defaultIndex: 1
			}, {
				divider: true,
				content: '',
				className: 'slot2'
			}, {
				flex: 1,
				values: ['', '-'],
				className: 'slot3',
				textAlign: 'center',
				defaultIndex: 1
			}]
		}
	},
	created() {
		this.INIT_STATE();
		var that = this;
		api.getVideoKnowledges(2).then(response => {
			var arr=response.data.return.classify;
			that.subjectSlots[0].values = response.data.return.classify;
			that.subjectSlots[0].defaultIndex=1;			
			that.$refs.picker.setSlotValues(0, arr[0].list);
			that.$refs.picker.setSlotValues(1, arr[0].list[0].list);
			that.gradeName=arr[0].name;
			that.subjectName=arr[0].list[0].name;
			that.codeList=arr[0].list[0].list;
			that.id=that.codeList[0].id;
			that.type=that.codeList[0].type;
			that.getVideoList()
			Indicator.close()
		})
		$(function() {
			var h = document.body.clientHeight;
			$('.content').css('min-height', h - 44 - 50 + 'px')
		})
	},
	mounted() {
		Indicator.open({
			text: 'Loading...',
			spinnerType: 'triple-bounce'
		});
		this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top ;

	},
	computed: {
		...mapState(['userlogin'])
	},
	methods: {
		...mapMutations(['INIT_STATE']),
		onSubjectChange(picker, value) {
			picker.setSlotValues(1, value[0].list);
		},
		handleBottomChange(status) {
			this.bottomStatus = status;
		},
		loadBottom() {
			setTimeout(() => {
				if(this.currentPage * 15 < this.count) {
					this.bottomLoadingText = '加载中'
					this.currentPage++
						this.getVideoList()
				} else {
					this.bottomLoadingText = '没有更多了'
				}
				this.$refs.loadmore.onBottomLoaded();
			}, 1500);
		},
		playVideo(item) {
			api.getVideoDetail(item.id).then(response => {
				this.$router.push({
					path: `/playvideo/${response.data.return.ccid}/${item.small}`
				})
			})
		},
		getVideoList() {
			var that = this;
			api.getVideoList(this.id, this.type, 15, this.currentPage).then(response => {
				that.count = parseInt(response.data.count)
				if(response.data.videolist){
					that.videoList = that.videoList.concat(that.videoList, response.data.videolist)
					that.noData=false					
				}else{
					that.noData=true
				}
				Indicator.close()
			})
		},
		cancelSubject(){
			this.showPicker=false;
		},
		chooseSubject(){			
			Indicator.open({
				text: 'Loading...',
				spinnerType: 'triple-bounce'
			});
			this.showPicker=false;
			this.codeList=this.$refs.picker.values[1].list;
			this.gradeName=this.$refs.picker.values[0].name;
			this.subjectName=this.$refs.picker.values[1].name;
			this.videoList=[];
			this.id=this.codeList[0].id;
			this.type=this.codeList[0].type;
			this.getVideoList();
			
		},
		chooseCode(x,event){
			Indicator.open({
				text: 'Loading...',
				spinnerType: 'triple-bounce'
			});
			$(event.target).addClass('active').siblings().removeClass('active')
			this.id=x.id;
			this.type=x.type;
			this.videoList=[];
			this.getVideoList()
		}
	}
}</script>

<style scoped>
.page-loadmore-wrapper {
	overflow: scroll
}

.slide-enter {
	max-height: 0;
	overflow: hidden;
}

.slide-enter-to {
	max-height: 600px;
	overflow: hidden;
}

.slide-enter-active {
	transition: 1s;
}

.slide-leave {
	max-height: 600px;
	overflow: hidden;
}

.slide-leave-to {
	max-height: 0;
	overflow: hidden;
}

.slide-leave-active {
	transition: 1s;
}
.code {
	font-size: 14px;
	color: #4A4A4A;
	width: 100%;
	overflow-x: scroll;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border-bottom: 1px solid #e0e0e0;
}
.code>.outBox{
	width: 1000%;
	padding-left: 0.2rem;
}
.code>.outBox>div{
	float: left;
	height: 100%;
	padding-right: 0.4rem;
}
.code>.outBox>div.active{
	color:#FA8C13;
	font-weight: bold;
}
.noData{
	position: absolute;
	top: 50%;
	text-align: center;
	width: 100%;
}
ul {
	padding: 0;
	margin: 0;
	padding-left: 0.4rem;
	margin-top: 14px;
}

li {
	margin: 0;
	float: left;
	width: 3rem;
	height: 172.5px;
	list-style: none;
	font-size: 14px;
	overflow: hidden;
	text-align: left;
	margin-right: 0.4rem;
}
li>div{
	width: 100%;
	height: 112.5px;
	
}
li>p{
	margin: 0;
	margin-top: 5px;
}
li img{
	width: 100%;
	height: 100%;
	
}
.picker{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 2;
	background: #FFFFFF;
}
.mint-datetime-cancel{
	color: #4A4A4A;
	font-size: 14px;
	box-sizing: border-box;
}
.mint-datetime-confirm{
	color: #FA8C13;
	font-size: 14px;
	box-sizing: border-box;
}
</style>